<template>
  <div class="manage-identities">
    <el-scrollbar height="600px">
      <div class="title">管理商店</div>
      <el-button type="primary" :icon="Plus" circle class="add" @click="identityVisible = true" />
      <div class="identities">
        <IdentityItem
          v-for="identity in identities"
          v-if="identities.length > 0"
          :obj="identity"
          @openIdentity="openDialog"
          @close="closeDialog"
        ></IdentityItem>
        <el-empty v-else description="你还没有添加商店">
          <el-button type="primary" @click="identityVisible = true">添加商店</el-button>
        </el-empty>
      </div>
    </el-scrollbar>
  </div>
  <IdentityDialog v-if="identityVisible" @close="closeDialog" :id="identityId"></IdentityDialog>
</template>

<script setup>
import IdentityItem from './components/IdentityItem.vue'
import IdentityDialog from './components/IdentityDialog.vue'
import { getIdentity } from '@/api/shop'
import { Plus } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'

// 增加身份弹窗
const identityVisible = ref(false)

// 身份集合
const identities = ref([])

// 打开弹窗id
const identityId = ref()

// 获取所有身份
const getIdentities = async () => {
  const { data } = (await getIdentity()).data
  identities.value = data
}

// 关闭弹窗
const closeDialog = async () => {
  await getIdentities()
  identityVisible.value = false
  // 刷新页面
  history.go(0)
}

// 打开身份弹窗
const openDialog = (id) => {
  identityId.value = id
  identityVisible.value = true
}

// 获取身份列表
onMounted(() => {
  getIdentities()
})
</script>

<style scoped less="scss">
.manage-identities {
  position: relative;
  height: 600px;

  .title {
    font-size: 20px;
    margin: 10px 20px;
  }

  .add {
    position: absolute;
    right: 5%;
    top: 5%;
  }

  .identities {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;

    margin-top: 40px;
  }
}
</style>
